<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="<c:url value="/assets/materialize/css/materialize.min.css"></c:url>" media="screen,projection" />
    <!-- Bootstrap Styles-->
    <link href="<c:url value="/assets/css/bootstrap_${sessionScope.configParam.fontSize}.css"></c:url>" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="<c:url value="/assets/css/font-awesome.css"></c:url>" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="<c:url value="/assets/css/custom-styles.css"></c:url>" rel="stylesheet" />
<c:if test="${not empty sessionScope.configParam}">
	<style>
	*{
		font-family: "${sessionScope.configParam.fontFamily}";
		font-size: ${sessionScope.configParam.fontSize}px;
	}
	</style>
</c:if>

<style type="text/css">
.card .card-content,.card .card-action{
	padding:10px;
}
.card.horizontal.cardIcon .card-image i {
    margin-top: 10%;
}
.boxShadow{
 box-shadow: -2px 2px 5px 3px #3d9094;
}


</style>
</head>
</head>

<body>
  <div class="container">
	<div class="row" style="margin-top: 30px;margin-bottom: 0px;">
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image">
					<i class="fa fa-tasks fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 任务：5件</strong> 
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div> 
		</div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image orange">
					<i class="fa fa-envelope fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 邮件：4封</strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div> 
	    </div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image red">
					<i class="fa fa-clock-o fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 公告：3条 </strong>
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div>
	    </div>
	    <div class="col-md-3">
			<div class="card horizontal cardIcon waves-effect waves-dark boxShadow">
				<div class="card-image blue">
				<i class="fa fa-comments fa-4x"></i>
				</div>
				<div class="card-stacked">
					<div class="card-content">
						<strong> 评论：8条</strong> 
					</div>
					<div class="card-action">
						<strong> Show  <i class="fa fa-eye fa-x" style="color: blue;"></i> </strong>
					</div>
				</div>
			</div> 
	    </div>
	</div>
	
	<div class="row" style="margin-bottom: 0px;">
		<div class="col-md-5">
			<div class="card  boxShadow">
				<div class="card-action">
					<b>邮件列表</b>
				</div>
				<div class="card-image">
					<div class="collection">
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge red" data-badge-caption="">未读</span>
						</a>
						<a href="#!" class="collection-item">
							程序员论坛
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							Xth8013@qq.com
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge red" data-badge-caption="">未读</span>						</a>
						<a href="#!" class="collection-item">
							Xth8013@qq.com
							<span class="new badge green" data-badge-caption="">已读</span>
						</a>
						<a href="#!" class="collection-item">
							GitHub
							<span class="new badge green" data-badge-caption="">已读</span>
						</a>
					</div>
				</div> 

			</div>	  

		</div>
		<div class="col-md-7">
			<div class="card  boxShadow">
				<div class="card-action">
					<b>公告列表</b>
				</div>
				<div class="card-image">
					<ul class="collection">
						<li class="collection-item avatar">
							<i class="material-icons circle green">insert_chart</i>
							<span class="title">Angular来了</span>
							<p> “Angular2.0视频教程”来了!这是第一个完整版的Angular 2.0系列中文视频教程...</p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle">folder</i>
							<span class="title">R语言</span>
							<p>R语言实现广义加性模型(GAM） GAM模型 当因变量和自变量不呈线性关系时 ,可用广义相加模型（ GAM）... </p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>
						<li class="collection-item avatar">
							<i class="material-icons circle red">play_arrow</i>
							<span class="title">大数据与人工智能</span>
							<p>金融科技3.0时代 大数据和人工智能成新引擎...</p>
							<a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
						</li>			
					</ul>
				</div>  
			</div>	 
		</div>
	</div>
</div>
<script src="<c:url value="/assets/js/jquery-1.10.2.js"></c:url>"></script>
    <script src="<c:url value="/assets/js/bootstrap.min.js"></c:url>"></script>
	<script src="<c:url value="/assets/materialize/js/materialize.min.js"></c:url>"></script>
</body>

</html>